<template>
  <!-- 数据列表 -->
  <div class="data_wrap">
    <!-- 搜索 -->
    <div class="search">
      <div class="search_row">
        <span>公司名称：</span>
        <el-select
          v-model="queryParam.comName"
          style="width:154px;margin-right:20px;height:36px;padding: 0;"
        >
          <el-option
            v-for="item in comOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <span>处理状态：</span>
        <el-select
          v-model="queryParam.status"
          style="width:154px;margin-right:20px;height:36px;padding: 0;"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <span class="demonstration">举报时间：</span>
        <el-date-picker
          placeholder="开始日期"
          style="width:154px;margin-right:12px"
          v-model="queryParam.upTimeStart"
          :clearable="false"
        ></el-date-picker>至
        <el-date-picker
          placeholder="结束日期"
          style="width:154px;margin-left:12px"
          v-model="queryParam.upTimeEnd"
        :clearable="false"
        ></el-date-picker>

        <el-button
          type="primary"
          @click="select()"
          style="width:52px;margin-left: 20px;padding: 0px;height:36px"
        >查询</el-button>
        <el-button
          style="width:52px;margin-left: 12px;padding:0px;height:36px"
          @click="resetQueryParam"
        >重置</el-button>
      </div>
      <div style="margin-top:12px">
        <span>被举报人：</span>
        <el-input
          v-model="queryParam.breporter"
          placeholder="请输入举报人"
          style="width:154px;margin-right:20px;height:36px;padding: 0;"
        ></el-input>
        <span>举报方式：</span>
        <el-select
          v-model="queryParam.reportWay"
          style="width:154px;margin-right:20px;height:36px;padding: 0;"
        >
          <el-option
            v-for="item in reportWayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <span>举报来源：</span>
        <el-select
          v-model="queryParam.reportRes"
          style="width:154px;margin-right:20px;height:36px;padding: 0;"
        >
          <el-option
            v-for="item in reportResOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table_data">
      <el-table
        v-loading="loading"
        id="tableClass"
        :border="border"
        :data="tableData"
        style="width: 100%"
        height="580"
        :header-cell-style="{color:'#000000',backgroundColor:'#E8E8E8',padding:'0px'}"
        :header-row-style="{height:'46px'}"
        :row-style="{height:'50px'}"
        :cell-style="{padding:'0px'}"
      >
        <el-table-column
          type="index"
          min-width="50"
          width="50"
          label="序号"
          align="center"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          prop="breporter"
          label="被举报人"
          min-width="120"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="comName"
          label="公司名称"
          min-width="120"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="reportTitle"
          label="举报标题"
          min-width="250"
          width="250"
          align="center"
        ></el-table-column>
         <el-table-column
          prop="type"
          label="问题类型"
          min-width="120"
          width="120"
          align="center"
        ></el-table-column>
         <el-table-column
          prop="reportRes"
          label="举报来源"
          min-width="120"
          width="120"
          align="center"
        ></el-table-column>

         <el-table-column
          prop="reportWay"
          label="举报方式"
          min-width="120"
          width="120"
          align="center"
        ></el-table-column>
         <el-table-column
          prop="status"
          label="受理程度"
          min-width="120"
          width="120"
          align="center"
          :formatter="formatStatus"
        ></el-table-column>
        <el-table-column
          prop="reportTime"
          label="举报时间"
          min-width="200"
          width="200"
          align="center"
          :resizable="false"
        ></el-table-column>

        <el-table-column prop="change" label="操作" >
          <template slot-scope="scope">
          <el-button @click="handlerReport(scope.row.id)" style="width: 60px;line-height: 28px;margin-left: 66px;padding: 0;">预览</el-button>
          <el-button 
            v-if="scope.row.status==1"
            type="primary"
            style="width: 60px;line-height: 28px;margin-left: 20px;padding: 0;"
          >受理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_wrap">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-sizes="[10, 30, 50]"
        layout="total,  prev, pager, next, sizes,jumper"
        :total="100"
        style="font-weight:400;padding-right:20px"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Popup/Pagination"; // 分页
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      border: true, // 是否有边框
      loading: true,
      canReport: true,
      queryParam: {
        breporter: "",
        status: "",
        comName: "",
        upTimeStart: "",
        upTimeEnd: "",
        pageNum: 1,
        pageSize: 10,
        total: "20",
        reportRes: "",
      },
      statusOptions: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "待处理",
        },
        {
          value: "2",
          label: "已受理",
        },
      ],
      reportResOptions: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "二维码",
        },
        {
          value: "2",
          label: "互联网",
        },
      ],
      reportWayOptions: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "实名举报",
        },
        {
          value: "2",
          label: "匿名举报",
        },
      ],
      comOptions: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "开拓热力",
        },
        {
          value: "2",
          label: "经开股份",
        },
      ],
      value: "",
      value1: "",
      tableData: [
        {
          id: "1",
          breporter:"李鹏",
          comName: "开拓热力",
          reportTitle: "占用公司的办公司出租，收租金",
          reportTime: "2019-10-10 12:10:30",
          type:"贪污受贿",
          reportRes:"二维码",
          reportWay:"实名举报",
          status:"1",
        },{
          id: "2",
          breporter:"李鹏",
          comName: "开拓热力",
          reportTitle: "占用公司的办公司出租，收租金",
          reportTime: "2019-10-10 12:10:30",
          type:"贪污受贿",
          reportRes:"二维码",
          reportWay:"实名举报",
          status:"2",
        },{
          id: "3",
          breporter:"李鹏",
          comName: "开拓热力",
          reportTitle: "占用公司的办公司出租，收租金",
          reportTime: "2019-10-10 12:10:30",
          type:"贪污受贿",
          reportRes:"网联网",
          reportWay:"实名举报",
          status:"2",
        },{
          id: "4",
          breporter:"李鹏",
          comName: "开拓热力",
          reportTitle: "占用公司的办公司出租，收租金",
          reportTime: "2019-10-10 12:10:30",
          type:"贪污受贿",
          reportRes:"二维码",
          reportWay:"实名举报",
          status:"2",
        },{
          id: "5",
          breporter:"李鹏",
          comName: "开拓热力",
          reportTitle: "占用公司的办公司出租，收租金",
          reportTime: "2019-10-10 12:10:30",
          type:"贪污受贿",
          reportRes:"二维码",
          reportWay:"匿名举报",
          status:"2",
        },{
          id: "6",
          breporter:"李鹏",
          comName: "开拓热力",
          reportTitle: "占用公司的办公司出租，收租金",
          reportTime: "2019-10-10 12:10:30",
          type:"贪污受贿",
          reportRes:"二维码",
          reportWay:"实名举报",
          status:"2",
        },{
          id: "7",
          breporter:"李鹏",
          comName: "开拓热力",
          reportTitle: "占用公司的办公司出租，收租金",
          reportTime: "2019-10-10 12:10:30",
          type:"贪污受贿",
          reportRes:"网联网",
          reportWay:"匿名举报",
          status:"2",
        },{
          id: "8",
          breporter:"李鹏",
          comName: "开拓热力",
          reportTitle: "占用公司的办公司出租，收租金",
          reportTime: "2019-10-10 12:10:30",
          type:"贪污受贿",
          reportRes:"二维码",
          reportWay:"实名举报",
          status:"2",
        },{
          id: "9",
          breporter:"李鹏",
          comName: "开拓热力",
          reportTitle: "占用公司的办公司出租，收租金",
          reportTime: "2019-10-10 12:10:30",
          type:"贪污受贿",
          reportRes:"二维码",
          reportWay:"实名举报",
          status:"2",
        },{
          id: "10",
          breporter:"李鹏",
          comName: "开拓热力",
          reportTitle: "占用公司的办公司出租，收租金",
          reportTime: "2019-10-10 12:10:30",
          type:"贪污受贿",
          reportRes:"二维码",
          reportWay:"实名举报",
          status:"2",
        }
        
      ],
    };
  },
  created() {
    setTimeout(() => {
      this.loading = false;
    }, 500);
  },
  mounted() {
    // 修改分页器 中 '前往' -> '跳转至'
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳转至 ";
  },
  methods: {
    select() {},
    handleSizeChange() {},
    handleCurrentChange() {},
    currentPage1() {},
    createReport() {
      this.$router.push({ name: "CreateInstructions" });
    },
    resetQueryParam() {
      Object.assign(this.$data.queryParam, this.$options.data().queryParam);
    },
    formatStatus(row, column, cellValue, index){
      if(cellValue == '1'){
        return "待处理"
      }else if(cellValue =='2'){
        return "已受理"
      }else{
        return "未知状态"
      }
    },
    handlerReport(id){
      this.$router.push({name:'DealPetition'})
    }
  },
};
</script>
<style lang="less" scoped>
.data_wrap {
  height: 726px;
  position: relative;
  // flex: 1;
  // 搜索
  .search {
    margin-bottom: 20px;
    width:100%;
    min-width:1080px;
    /deep/ .el-input__inner {
      height: 36px;
    }
    /deep/.el-icon-date
    {
      line-height: 36px;
      position: absolute;
		  left: 120px;
    }
    /deep/.el-icon-arrow-up{
      line-height: 36px;
    }
  }
  /**.table_data {
    height: 610px;
    overflow-y: scroll;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
  }*/
  // 下拉框样式
  .pagination_wrap {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: -20px;
    right: 0;
  }
}
</style>